import React from 'react';
import { View } from "@tarojs/components";
import i18n from 'i18n-js';
import PageContainer from "@/components/PageContainer";
import FlexScrollView from '@/components/FlexScrollView';
import { getAppName } from '@/config/template'
import {
  GStyleSheet,
  DynamicColors,
} from '@/utils/DarkMode';
import languageModel from '@/models/language'

const dstyles = GStyleSheet.create({
  container: {
    width: '100%',
    height: '100%',
    flex: 1,
    flexDirection: 'column',
    backgroundColor: DynamicColors.normalBackgroundColor,
    paddingLeft: 15,
    paddingRight: 15
  },
  title: {
    fontSize: 26,
    fontWeight: 'bold',
    marginTop: 10,
    marginBottom: 10,
    textAlign: 'center',
    color: DynamicColors.normalTextColor,
  },
  subTitle: {
    marginTop: 8,
    marginBottom: 8,
    fontSize: 22,
    fontWeight: '400',
    color: DynamicColors.normalTextColor,
  },
  content: {
    fontSize: 16,
    marginTop: 3,
    marginBottom: 3,
    color: DynamicColors.normalTextColor,
  },
});

const content = [
  {
    subTitle: 'CHARGE_AGREEMENT_CONTENT_1',
    subContent: [
      'CHARGE_AGREEMENT_CONTENT_2',
      'CHARGE_AGREEMENT_CONTENT_3',
      'CHARGE_AGREEMENT_CONTENT_4'
    ]
  },
  {
    subTitle: 'CHARGE_AGREEMENT_CONTENT_5',
    subContent: [
      'CHARGE_AGREEMENT_CONTENT_6',
      {
        subTitle: 'CHARGE_AGREEMENT_CONTENT_7',
        subContent: [
          'CHARGE_AGREEMENT_CONTENT_8',
          'CHARGE_AGREEMENT_CONTENT_9',
          'CHARGE_AGREEMENT_CONTENT_10',
          'CHARGE_AGREEMENT_CONTENT_11'
        ]
      },
      'CHARGE_AGREEMENT_CONTENT_12',
      {
        subTitle: 'CHARGE_AGREEMENT_CONTENT_13',
        subContent: [
          'CHARGE_AGREEMENT_CONTENT_14',
          'CHARGE_AGREEMENT_CONTENT_15',
        ]
      },
      'CHARGE_AGREEMENT_CONTENT_16'
    ]
  },
  {
    subTitle: 'CHARGE_AGREEMENT_CONTENT_17',
    subContent: [
      'CHARGE_AGREEMENT_CONTENT_18',
      {
        subTitle: 'CHARGE_AGREEMENT_CONTENT_19',
        subContent: [
          'CHARGE_AGREEMENT_CONTENT_20',
          'CHARGE_AGREEMENT_CONTENT_21',
          'CHARGE_AGREEMENT_CONTENT_22',
        ]
      },
      {
        subTitle: 'CHARGE_AGREEMENT_CONTENT_23',
        subContent: [
          'CHARGE_AGREEMENT_CONTENT_24',
          'CHARGE_AGREEMENT_CONTENT_25',
          'CHARGE_AGREEMENT_CONTENT_26',
          'CHARGE_AGREEMENT_CONTENT_27',
          'CHARGE_AGREEMENT_CONTENT_28',
          'CHARGE_AGREEMENT_CONTENT_29'
        ]
      },
      'CHARGE_AGREEMENT_CONTENT_30',
      'CHARGE_AGREEMENT_CONTENT_31',
      'CHARGE_AGREEMENT_CONTENT_32',
      'CHARGE_AGREEMENT_CONTENT_33',
      'CHARGE_AGREEMENT_CONTENT_34'
    ]
  },
  {
    subTitle: 'CHARGE_AGREEMENT_CONTENT_35',
    subContent: [
      'CHARGE_AGREEMENT_CONTENT_36',
      {
        subTitle: 'CHARGE_AGREEMENT_CONTENT_37',
        subContent: [
          'CHARGE_AGREEMENT_CONTENT_38',
          'CHARGE_AGREEMENT_CONTENT_39',
          'CHARGE_AGREEMENT_CONTENT_40',
          'CHARGE_AGREEMENT_CONTENT_41',
          'CHARGE_AGREEMENT_CONTENT_42'
        ]
      },
      {
        subTitle: 'CHARGE_AGREEMENT_CONTENT_43',
        subContent: [
          'CHARGE_AGREEMENT_CONTENT_44',
          'CHARGE_AGREEMENT_CONTENT_45',
          'CHARGE_AGREEMENT_CONTENT_46',
          'CHARGE_AGREEMENT_CONTENT_47'
        ]
      },
      {
        subTitle: 'CHARGE_AGREEMENT_CONTENT_48',
        subContent: [
          'CHARGE_AGREEMENT_CONTENT_49',
          'CHARGE_AGREEMENT_CONTENT_50',
        ]
      },
    ]
  },
  {
    subTitle: 'CHARGE_AGREEMENT_CONTENT_51',
    subContent: [
      'CHARGE_AGREEMENT_CONTENT_52',
      'CHARGE_AGREEMENT_CONTENT_53',
      'CHARGE_AGREEMENT_CONTENT_54',
      'CHARGE_AGREEMENT_CONTENT_55',
      'CHARGE_AGREEMENT_CONTENT_56',
    ]
  }
];

export default class ChargeAgreement extends React.Component {
  static navigationOptions = () => ({
    title: i18n.t('CHARGE_AGREEMENT'),
  });

  render() {
    const styles = dstyles.style;
    const appName = getAppName(languageModel.key);
    return (
      <PageContainer
        style={styles.container}
        title={i18n.t('CHARGE_AGREEMENT')}
      >
        <FlexScrollView id='chargeAgreementScrollList'>
          <View style={styles.title}>{i18n.t('CHARGE_AGREEMENT_TITLE')}</View>
          <View style={styles.content}>
            {i18n.t('CHARGE_AGREEMENT_DESCRIPTION', { name: `${appName}` })}
          </View>
          {
            content.map((item) => {
              const subContent = [];
              item.subContent.forEach((subItem) => {
                if (subItem.subTitle) {
                  subContent.push(<View style={styles.content}>{i18n.t(subItem.subTitle)}</View>);
                  subItem.subContent.forEach((subSubItem) => {
                    subContent.push(<View style={styles.content}>{i18n.t(subSubItem)}</View>);
                  });
                } else {
                  subContent.push(<View style={styles.content}>{i18n.t(subItem)}</View>);
                }
              });
              return [
                <View style={styles.subTitle}>{i18n.t(item.subTitle)}</View>,
                ...subContent,
              ];
            })
          }
        </FlexScrollView>
      </PageContainer>
    );
  }
}
